<template>
  <div class="text item">
    <el-tree
      :data="permissions"
      show-checkbox
      default-expand-all
      node-key="name"
      ref="tree"
      highlight-current
      :default-checked-keys="checkedKeys"
      :props="treeProps"
      @check="handleCheck"
    >
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      permissions: [],
      values: [],
      treeProps: {
        children: "children",
        label: "displayName",
      },
      excludeGroups: ["FeatureManagement", "AbpTenantManagement"],
    };
  },
  model: {
    prop: "checkedKeys",
    event: "change",
  },
  methods: {
    getData() {
      this.permissions = [];
      if (!this.role) return;
      let url = "/api/permission-management/permissions";
      let params = { providerKey: this.role.name, providerName: "R" };
      this.$request.get(url, { params }).then((res) => {
        let groups = res && res.groups ? res.groups : [];
        this.permissions = this.getPermissionTree(groups);
      });
    },
    getPermissionTree(groups) {
      let result = [];

      if (!groups || groups.length == 0) return result;

      for (let i = 0; i < groups.length; i++) {
        let group = groups[i];

        if (this.excludeGroups.includes(group.name)) continue;

        let groupPermissions = group.permissions;

        let parents = groupPermissions.filter((value) => {
          return !value.parentName;
        });

        if (!parents || parents.length == 0) return result;

        let children = groupPermissions.filter((value) => {
          return value.parentName;
        });

        for (let i = 0; i < parents.length; i++) {
          let node = this.getTreeNode(parents[i], children);

          result.push(node);
        }
      }

      return result;
    },
    getTreeNode(parent, children) {
      let displayName = parent.name
        .replaceAll(".", "")
        .replaceAll("_","")
        .replace(parent.name[0], parent.name[0].toLowerCase());
      displayName = this.$t("permissions." + displayName);
      let node = {
        id: parent.id,
        name: parent.name,
        granted: parent.isGranted,
        displayName: displayName,
        children: [],
      };
      let matchChildren = children.filter((value) => {
        return value.parentName == parent.name;
      });

      if (!matchChildren || children.length == 0) return node;

      for (let i = 0; i < matchChildren.length; i++) {
        let child = matchChildren[i];

        let childNode = this.getTreeNode(child, children);

        node.children.push(childNode);
      }

      return node;
    },
    handleCheck(node, nodeCheckInfo) {
      this.values = [];
      this.values = this.values.concat(nodeCheckInfo.checkedKeys);
      this.values = this.values.concat(nodeCheckInfo.halfCheckedKeys);
      this.$emit("change", this.values);
    },
  },
  mounted() {
    this.getData();
  },
  props: {
    checkedKeys: {
      type: Array,
      default: () => [],
    },
    role: {
      type: Object,
      default: () => {},
    },
  },
};
</script>
<style scoped></style>
